var out = document.querySelector(".outsideCircle");
var rotation = document.querySelector(".rotation");
var form = document.querySelector('.biaodan');
var circle = document.querySelector('.circle');
/* 利用半径做周边的修饰 */
for (let i = 0; i < 16; i++) {
    var angle = 22.5 * i + "deg";
    out.innerHTML += `<div class="radius${i}"></div>`;
    let radius = document.querySelector(`.radius${i}`);
    radius.innerHTML += `<p class="ball${i}"></p>`
    radius.innerHTML += `<p class="line${i}"></p>`
    let ball = document.querySelector(`.ball${i}`);
    let line = document.querySelector(`.line${i}`);
    ball.style.position = "absolute";
    ball.style.left = "50vmin";
    ball.style.width = "4vmin";
    ball.style.height = "4vmin";
    ball.style.backgroundColor = "#f2c587";
    ball.style.borderRadius = "4vmin";
    ball.style.marginTop = "0.3rem";
    ball.style.boxShadow = "0 0 1vmin black";
    ball.style.transform = "translate(-50%)";
    line.style.position = "absolute";
    line.style.left = "50vmin";
    line.style.top = "50vmin";
    line.style.height = "50vmin";
    line.style.transform = "translate(0,-100%)";
    radius.style.transformOrigin = "50vmin 50vmin";
    radius.style.transform = `rotate(${angle})`;
}

setTimeout(() => {
    form.style.display = "block";
    form.style.animation = "appear 0.5s ease-in-out"
    circle.style.display = "none";
}, 2000)
setTimeout(() => {
    // 停止动画
    rotation.style.animationPlayState = 'paused';
}, 5000)


